<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="application/javascript" src="/static/js/common.js"></script>
    <title>产品信息列表</title>
</head>
<body class="app-body">
<div class="app-panel">
    <div class="app-search">
        <div class="app-search">
            <fieldset class="layui-elem-field">
                <legend>查询</legend>
                <div class="layui-field-box">
                    <form class="layui-form" >
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">产品名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="productName" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">供应商</label>
                                <div class="layui-input-block">
                                    <select name="supplierUuid" id="_supplierUuid">
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">生产企业</label>
                                <div class="layui-input-block">
                                    <select name="makerUuid" id="_makerUuid">
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">产品规格</label>
                                <div class="layui-input-block">
                                    <input type="text" name="standard" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">税率</label>
                                <div class="layui-input-block">
                                    <input type="number" name="rate" min="0" step="0.01" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-btn-group">
                                    <button class="layui-btn" lay-submit lay-filter="_form_search">查询</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>
        </div>
    </div>
    <div class="app-context">
        <table class="layui-table" id="product_table" lay-filter="product_table_filter"></table>
    </div>
</div>
<!-- 顶部工具栏 -->
<script type="text/html" id="toolbar">
    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-normal" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</button>
        <button type="button" class="layui-btn" lay-event="export"><i class="layui-icon layui-icon-release"></i>导出</button>
    </div>
</script>
<!-- 行工具栏 -->
<script type="text/html" id="col-toolbar">
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-xs layui-btn-primary" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></button>
        <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" title="修改" lay-event="del"><i class="layui-icon">&#xe640;</i></button>
    </div>
</script>

<script type="application/javascript" th:inline="none">
    layui.use(['table', 'utils', 'axiosUtil', 'form'], function () {
        var $ = layui.$,
            table = layui.table,
            utils = layui.utils,
            axiosUtil = layui.axiosUtil,
            form = layui.form,
            layer = parent.layer;

        //预加载
        axiosUtil.axios_select({
            itemArr: [
                {item: "#_supplierUuid", url: "/company/supplier/select?type=1"}, //供应商
                {item: "#_makerUuid", url: "/company/supplier/select?type=2"}, //生产企业
            ],
            renderItem: form
        });

        var _table = table.render({
            elem: '#product_table',
            url : '/product/listData',
            page : true,
            height : "full-200",
            request: {
                pageName: 'current' //页码的参数名称，默认：page
                ,limitName: 'size' //每页数据量的参数名，默认：limit
            },
            toolbar: "#toolbar",
            defaultToolbar: ['filter', {
                title: '刷新' //标题
                ,layEvent: 'refresh' //事件名，用于 toolbar 事件中使用
                ,icon: 'layui-icon-refresh' //图标类名
            }],
            cols : [[
                {field: 'productName', title: '产品名称', align: 'left'},
                {field: 'supplierName', title: '供应商名称', align: 'left'},
                {field: 'makerName', title: '生产企业名称', align: 'left'},
                {field: 'standard', title: '规格', align:'center'},
                {field: 'unit', title: '单位', align:'center'},
                {field: 'units', title: '件装', align:'center'},
                {field: 'salePrice', title: '销售价格(￥)', align:'center'},
                {field: 'costPrice', title: '含税进价(￥)', align:'center'},
                {field: 'returnPrice', title: '返款单价(￥)', align:'center'},
                {field: 'rate', title: '税率(%)', align:'center', templet: function (d) {
                    return d.rate + "%";
                    }},
                {title: '操作', align:'center', toolbar: '#col-toolbar'}
            ]]
        });

        /**
         * 打开编辑界面
         * @param id
         * @param yes 点击确认之后回调方法
         * @private
         */
        function edit(id, yes){
            id = id == undefined ? '' : id;
            layer.open({
                type : 2,
                title: '新增/编辑',
                shadeClose: true,
                area : ['50%', '80%'],
                content : '/html/product/edit?id='+id,
                btn: ['保存', '取消'],
                success: function(layero, index){

                },yes: function (index, layero) {
                    var form = layer.getChildFrame('form', index);
                    var field = utils.formValue(form);
                    _submit(field, function () {
                        layer.close(index);
                        if(typeof yes === "function"){
                            yes(field);
                        }
                    });
                },btn2: function(index, layero){
                    layer.close(index);
                }
                ,end : function(index, layero){
                    axiosUtil.reload(_table);
                    return false;
                }
            });
        }

        /**
         * 表单提交
         * @param field
         * @param success
         * @private
         */
        function _submit(field, success){
            let url = '/product';
            if(field.id){
                url += '/edit'
            }else {
                url += '/save';
            }

            //表单验证
            //TODO 表单验证
            axios({
                method: 'post',
                url: url,
                data: Qs.stringify(field)
            }).then(function (response) {
                axiosUtil.axiosRes(response);
                success();
            }).catch(function (error) {
                axiosUtil.error(error);
            });
        }

        //监听头部工具栏事件
        table.on('toolbar(product_table_filter)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    edit();
                    break;
                case 'export':

                    layer.msg('删除');
                    break;
                case 'refresh':
                    axiosUtil.reload(_table);
                    break;
            }
        });

        //监听工具条
        table.on('tool(product_table_filter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            switch(obj.event){
                case 'edit':
                    edit(data.id, function (field) {
                        //同步更新缓存对应的值
                        obj.update(field);
                    });
                    break;
                case 'del':
                    layer.confirm('请确认删除【'+data.productName+'】', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                        axios.get("/product/del?id="+data.id);
                    });
                    break;
            }
        });

        form.on('submit(_form_search)', function(data){
            _table.reload({
                where: data.field
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    })

</script>
</body>
</html>
